<template>
  <div class="relative h-full">
    <div class="text-myRed-one h-9 leading-9" style="font-size: 10px;background-color: #eeeeee">
      <div class="float-left font-bold">已享优惠:省￥200.00</div>
      <div class="float-right text-gray-400 pr-2 cursor-pointer">编辑</div>
    </div>
    <div class="mt-3" v-for="(item,index) in prices">
      <el-row class="items-stretch">
        <el-col :span="2" class="text-center" :offset="1">
          <input v-model="item.check" type="checkbox" />
          <div style="font-size: 10px" class="mt-12 hover:text-red-700 cursor-pointer" @click="deletePrice(index)">删除</div>
        </el-col>
        <el-col :span="7">
          <img src="../assets/shopcartImg.jpg">
        </el-col>
        <el-col :span="14">
          <div class="hover:text-myRed-one cursor-pointer" style="font-size: 10px">华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</div>
          <div class="text-gray-400" style="font-size: 9px">颜色：白色 包装：裸装</div>
          <div>
            <el-row class="mt-3 items-center">
              <el-col :span="12">
                <div style="font-size: 13px">{{ item.newprice.toFixed(2) }}
                  <del class="text-gray-500">{{ item.oldprice.toFixed(2) }}</del>
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <input name="count" type="number" v-model="item.count">
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, Ref, reactive, watch} from "vue";
import {useStore} from "vuex";

class Price {
  oldprice: number;
  newprice: number;
  count: number;
  check: boolean;
  constructor(oldprice: number, newprice: number, count: number,check:boolean) {
    this.oldprice = oldprice;
    this.newprice = newprice;
    this.count = count;
    this.check = check;
  }
}

let count1: Ref<number> = ref(1)
let p1: Price = new Price(499.00, 399.00, 1,false);
let p2: Price = new Price(499.00, 399.00, 1,false);
let p3: Price = new Price(499.00, 399.00, 1,false);
let p4: Price = new Price(499.00, 399.00, 1,false);
let allPrice: Ref<number> = ref(0);
let prices: Array<Price> = reactive([p1, p2, p3, p4]);
let $store = useStore();
watch( () => $store.state.allCheck,() => {
  prices.forEach( item => {
    item.check = $store.state.allCheck
  })
})
watch( prices,(newValue,oldValue) => {
  allPrice.value = 0;
  prices.forEach( item => {
    if ( item.check === true){
      allPrice.value += item.newprice * item.count;
    }
  })
  $store.commit("setAllPrice",allPrice.value)
});
function deletePrice(index:number){
  prices.splice(index,1);
}
</script>

<style scoped>
input[name='count'] {
  width: 50px;
  border: 1px solid #eee;
  font-size: 10px;
  @apply pt-1 pb-1 ml-4
}

input[name="count"]:focus {
  outline: none;
  border: 1px solid #fd7a72;
}
</style>